<template>
  <div class="dialog_info">
    <div class="dialog_info_title">
      <el-tabs v-model="tabsName" tab-position="top">
        <el-tab-pane label="淹没分析" name="淹没分析">
          <submergeInfo />
        </el-tab-pane>
        <el-tab-pane label="村庄详情" name="村庄详情">
          <!-- <VillageDetails /> -->
        </el-tab-pane>
        <el-tab-pane label="通讯录" name="通讯录" />
      </el-tabs>
    </div>
  </div>
</template>

<script>
import submergeInfo from './submergeInfo.vue' // 淹没分析
// import VillageDetails from '../../../components/VillageDetails.vue' // 村庄详情
export default {
    components: {
        submergeInfo
        // VillageDetails
    },
    data() {
        return {
            tabsName: '淹没分析'
        }
    },
    methods: {}
}
</script>

<style lang="less" scoped>
	/deep/.el-tabs__nav-scroll {
		justify-content: left !important;
	}

	.dialog_info {
		margin-top: 15px;
		height: 100%;

		.dialog_info_title {
			height: 100%;

			/deep/.el-tabs {
				height: 100%;
			}
		}

	}

	/deep/.el-tab-pane {
		height: 100%;
	}

	/deep/ .el-tabs__nav-wrap::after {
		height: 40px;
		background: #223789;
		background: -webkit-linear-gradient(to right, #161e72, #223789, #0e1c65);
		background: linear-gradient(to right, #161e72, #223789, #0e1c65);
	}

	/deep/ .el-tabs__active-bar {
		display: none;
	}

	/deep/ .el-tabs__header {
		margin: 0 !important;
	}

	/deep/ .el-tabs__item.is-active {
		background: url("~@/assets/newimg/tabBg.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
		padding: 0;
	}

	/deep/ .el-tabs__item {
		color: #3c62b2;
		padding: 0;
		width: 100px;
		text-align: center;
	}
</style>
